<template>
    <view class="main">
        <!-- <view class="background"></view> -->
		<view class="Topbackground">
			<view class="box">
				<view class="info">
					<view class="pic">
						<image src="/static/icons/minelogo.png" mode="scaleToFill"></image>
					</view>		
					<view class="name" >
						<text>Hello!</text>
						<text v-if="userId==''">登录享受更多精彩服务</text>
					</view>
					<view class="LoginBox" @click="LoginJump" v-show="userId==''">
						<text>注册/登录</text>
					</view>
					<view class="LoginBox"  v-show="userId!=''">
						<text>已登录</text>
					</view>
				</view>
			</view>
		</view>
		<view class="ActiveBox">
			<view class="box">
				<view class="title" @click="JumpCoupon">
					<text>我的优惠券</text>
					<text>></text>
				</view>
				<view class="dataList">
					<view class="info1">
						<view class="num1">
							<text>*</text>
							<text>张</text>
						</view>
						<view class="text">
							<text>可使用</text>
						</view>
					</view>
					<view class="info2">
						<view class="num1">
							<text>*</text>
							<text>张</text>
						</view>
						<view class="text">
							<text>未开始</text>
						</view>
					</view>
					<view class="info2">
						<view class="num1">
							<text>*</text>
							<text>张</text>
						</view>
						<view class="text">
							<text>已过期</text>
						</view>
					</view>
				</view>
				<view class="bottombox">
					
				</view>
			</view>
		</view>
		<view class="OrderBox">
			<view class="box">
				<view class="title" @click="JumpOrder">
					<text>我的订单</text>
					<text>></text>
				</view>
				<view class="dataList">
					<view class="info1">
						<view class="num1">
							<text>*</text>
							<text>元</text>
						</view>
						<view class="text">
							<text>本周订单</text>
						</view>
					</view>
					<view class="info2">
						<view class="num1">
							<text>*</text>
							<text>元</text>
						</view>
						<view class="text">
							<text>本月订单 </text>
						</view>
					</view>
					<view class="info2">
						<view class="num1">
							<text>*</text>
							<text>元</text>
						</view>
						<view class="text">
							<text>累计订单</text>
						</view>
					</view>
				</view>
				<view class="bottombox">
					
				</view>
			</view>
		</view>
        <view class="content">
            <view class="lists">
                <!-- v-if="role==2" -->
               <!-- <view class="list" @click="switchRole" v-if="isManage">
                    <image src="../../static/icons/switch.png"></image>
                    <view class="text">身份切换</view>
                    <image src="../../static/icons/right.png"></image>
                </view> -->
                <!-- <view class="list" @click="toRepair" v-if="role == 2">
                    <image src="../../static/icons/tools.png"></image>
                    <view class="text">设备报修</view>
                    <image src="../../static/icons/right.png"></image>
                </view> -->
               <!-- <view class="list" @click="toOrder" v-if="role == 1">
                    <image src="../../static/icons/order.png"></image>
                    <view class="text">我的订单</view>
                    <image src="../../static/icons/right.png"></image>
                </view> -->
               <!-- <view class="list" @click="toMyPacket" v-if="role == 1">
                    <image src="../../static/icons/coupon.png"></image>
                    <view class="text">我的红包</view>
                    <image src="../../static/icons/right.png"></image>
                </view> -->
               <!-- <view class="list" @click="toBalance" v-if="role == 1">
                    <image src="../../static/icons/coupon.png"></image>
                    <view class="text">我的余额</view>
                    <image src="../../static/icons/right.png"></image>
                </view> -->
				<view class="list" @click="switchRole">
				    <image src="../../static/icons/mine2.png"></image>
				    <view class="text">身份切换</view>
				    <!-- <text>{{ contactPhone }}</text> -->
				    <image src="../../static/icons/right.png"></image>
				</view>
                <view class="list" @click="bindManage">
                    <image src="../../static/icons/bind.png"></image>
                    <view class="text">扫码绑定上货员</view>
                    <image src="../../static/icons/right.png"></image>
                </view>
                <!-- 				<view class="list" @click="toCoupon" v-if="role==1">
					<image src="../../static/icons/coupon.png"></image>
					<view class="text">我的优惠券</view>
					<image src="../../static/icons/right.png"></image>
				</view> -->
               <!-- <view class="list" @click="toQuestion">
                    <image src="../../static/icons/question.png"></image>
                    <view class="text">常见问题</view>
                    <image src="../../static/icons/right.png"></image>
                </view> -->
                <view class="list" @click="phoneContact">
                    <image src="../../static/icons/telephone.png"></image>
                    <view class="text">联系客服</view>
                    <!-- <text>{{ contactPhone }}</text> -->
                    <image src="../../static/icons/right.png"></image>
                </view>
              <!--  <view class="list" @click="toOpinion">
                    <image src="../../static/icons/opinion.png"></image>
                    <view class="text">意见与反馈</view>
                    <image src="../../static/icons/right.png"></image>
                </view> -->

                <!-- 				<view class="list" @click="showQrCode">
					<image src="../../static/icons/notice.png"></image>
					<view class="text">公众号信息</view>
					<image src="../../static/icons/right.png"></image>
				</view> -->
            </view>
            <!-- <view class="tips">v1.2.3</view> -->
        </view>
		<view class="footer">
		    <view class="contents">
				<view class="nav" @click="IndexJump">
				    <image src="../../static/icons/home.png" ></image>
				    <view class="text">首页</view>
				</view>
				<view class="nav" @click="orderJump">
				    <image src="../../static/icons/order.png" ></image>
				    <view class="text">订单</view> 
				</view> 
				<view class="nav1" @click="scanToGetData">
					<view class="image">
						<image src="../../static/icons/scan.png"  mode="scaleToFill"></image>
					</view>
				    <view class="text">扫码开门</view>
				</view>
		        <view class="nav" @click="fault">
		            <image src="../../static/icons/setting.png" ></image>
		            <view class="text">报修</view>
		        </view>
		        <view class="nav" @click="mine">
		            <image src="../../static/icons/mine2.png" ></image>
		            <view class="text">我的</view>
		        </view> 
		       <!-- <view class="open-wrapper" @click="openCondition" disabled="isOpening"> -->
		            <!-- #ifdef MP-WEIXIN -->
		            <!-- <image class="logo" src="../../static/icons/payscore_logo.png" v-if="needUserConfirm" /> -->
		            <!-- #endif -->
		            <!-- <view class="open">立即开门</view> -->
		        <!-- </view> -->
		        <!-- #ifdef MP-WEIXIN -->
		      <!--  <view class="slogan-wechat">
		            <image class="payscore-logo" src="../../static/icons/payscore_logo.png" mode="widthFix" />
		            <label class="payscore-text">微信支付分</label>
		            <label class="vertical-bar">|</label>
		            <label class="payscore-text">550分及以上优享</label>
		        </view> -->
		        <!-- #endif -->
		    </view>
		</view>
        <view class="qrCode" v-if="isShowQrCode" @click="showQrCode">
            <view class="qrImage">
                <image @click.stop src="../../static/icons/qrcode.png"></image>
            </view>
        </view>
    </view>
</template>

<script>
    import mine from "./mine.js";
    export default mine;
</script>

<style lang="scss" scoped>    
	/* .background{
		background: #FFDA00;
		height: 100rpx;
		width: 100%;
		position: absolute;
		top: 0;
	} */
	.OrderBox{
		height: 17vh;
		display: flex;
		justify-content: center;
		position:relative;
		top:-7vh;
		.box{					
			width: 90%;
			background-color: #fff;
			border-radius: 20rpx;
			position:relative;
			.bottombox{
				height:0.8vh;
				width: 100%;
				background-color: #34a815;
				border-bottom-right-radius: 10rpx;
				border-bottom-left-radius: 10rpx;
				position: absolute;
				bottom: 0;
				left:0;
			}
			.title{
				margin-top: 40rpx;
				margin-left: 50rpx;
				font-size: 35rpx;
				text:nth-child(1){
					// font-weight: 700;				
				}	
				text:nth-child(2){
					margin-left: 15rpx;
					color: #c9c9c9;					
				}				
			}
		} 
		.dataList{
			// margin-top: 10rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.info1{
				color: #004da0;				
				display:flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.num1{
					text:nth-child(1){
						font-size: 10vw;
					}
					text:nth-child(2){
						font-size: 20rpx;
						// margin-left: 20rpx;
					}
				}
				.text{
					// margin-top: 10rpx;
					font-size: 30rpx;
					// font-weight: 700;
				}
			}
			.info2{
				color: #c9c9c9;
				display:flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.num1{
					text:nth-child(1){
						font-size: 10vw;
					}
					text:nth-child(2){
						font-size: 20rpx;
						// margin-left: 20rpx;
					}
				}
				.text{
					margin-top: 10rpx;
					font-size: 30rpx;
					// font-weight: 700;
				}
			}
		}
	}
	.ActiveBox{
		height: 17vh;
		display: flex;
		justify-content: center;
		position:relative;
		top:-9vh;
		.box{					
			width: 90%;
			background-color: #fff;
			border-radius: 20rpx;
			position:relative;
			.bottombox{
				height:0.8vh;
				width: 100%;
				background-color: #34a815;
				border-bottom-right-radius: 10rpx;
				border-bottom-left-radius: 10rpx;
				position: absolute;
				bottom: 0;
				left:0;
			}
			.title{
				margin-top: 40rpx;
				margin-left: 50rpx;
				font-size: 35rpx;
				text:nth-child(1){
					// font-weight: 700;				
				}	
				text:nth-child(2){
					margin-left: 15rpx;
					color: #c9c9c9;					
				}				
			}
		}
		.dataList{
			// margin-top: 10rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.info1{
				color: #004da0;				
				display:flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.num1{
					text:nth-child(1){
						font-size: 10vw;
					}
					text:nth-child(2){
						font-size: 20rpx;
						// margin-left: 10rpx;
					}
				}
				.text{
					// margin-top: 10rpx;
					font-size: 30rpx;
					// font-weight: 700;
				}
			}
			.info2{
				color: #c9c9c9;
				display:flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.num1{
					text:nth-child(1){
						font-size: 10vw;
					}
					text:nth-child(2){
						font-size: 20rpx;
						// margin-left: 10rpx;
					}
				}
				.text{
					margin-top: 10rpx;
					font-size: 30rpx;
					// font-weight: 700;
				}
			}
		}
	}
	.Topbackground{
		background-color: #004da0;
		height: 35vh;
		width: 100%;
		box-shadow: 0px 20px 10px 0px rgba(231, 231, 231, 1.0); 
		.box{
			display: flex;
			justify-content: center;
			align-items: center;			
				.info{
					height: 10vh;
					margin-top: 15vh;
					width: 90%;
					background-color: #004da0;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					position: relative;
					.LoginBox{
						height: 3vh;
						width: 22vw;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 25rpx;
						border-radius: 20rpx;
						background-color: #34a815;
						color: #fff;
						position: absolute;
						transform: translate(0, -50%);
						right: 4vw;
						top:50%;
						
					}
					.name{						
						margin-left: 5vw;
						display: flex;
						justify-content: center;
						// align-items: center;
						flex-direction: column;
						color: #fff;
						text:nth-child(1){
							font-size: 40rpx;
							font-weight: 700
						}
						text:nth-child(2){
							font-size: 25rpx;
							margin-top: 10rpx;
						}
					}
					.pic{
						height: 7vh;
						width: 7vh;
						border-radius: 50%;
						margin-left: 5vw;
						image{
							height: 100%;
							width: 100%;	
						}
					}
				}
		}
	}
	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 8vh;
		/* color: #fff; */
	}
	
	.footer .contents {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding-bottom: 10rpx;
		// padding-top: 10rpx;
		position: relative;
		box-shadow: #eaeaea 4rpx 0 4rpx 0;
	}
	
	.footer .nav {
		width: 20vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
	}
	
	.footer .nav image {
		width: 50rpx;
		height: 50rpx;
		position: relative;
	}
	.footer .nav1 .image image {
		width: 50rpx;
		height: 50rpx;
		position: relative;	
	}
	.footer .nav1 .image {
		width: 90rpx;
		height: 90rpx;
		border-radius: 45%;
		background-color: #004da0;
		display: flex;	
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
	}
	.footer .nav .text {
		font-size: 28rpx;
		color: #c9c9c9;
	}
	.footer .nav1 .text {
		font-size: 28rpx;
		color: #c9c9c9;
	}
	.footer .contents .nav1 {
		z-index: 999;	
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 45%;
		height: 140rpx;
		width: 140rpx;
		background-color: #fff;		
		top: -45rpx;
		position: relative;
	}
	.content{
		background: white;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		margin-top: 2vh;
		height: 22vh;
		top:-6vh;
	}
	
	.content .lists{
		padding: 20rpx 0;
	}
	
	.content .lists .list{
		display: flex;
		align-items: center;
		padding: 30rpx;
		min-height: 3vh;
	}
	
	.content .lists .list:last-child{
		margin-bottom: 200rpx;
	}
	
	.content .lists .list image{
		width: 40rpx;
		height: 40rpx;
	}
	
	.content .lists .list image:last-child{
		width: 30rpx;
		height: 30rpx;
	}
	
	.content .lists .list .text{
		flex: 1;
		font-size: 30rpx;
		margin: 0 20rpx;
	}
	
	.content .lists .list text{
		font-size: 20rpx;
		margin: 0 20rpx;
		color: grey;
	}
	
	.content .tips{
		color: grey;
		bottom: 0;
		text-align: center;
		position: absolute;
		left: 0;
		transform: rotateX(-50%);
		width: 100%;
	}
	
	.qrCode{
		background: rgba(0,0,0,0.5);
		height: 100%;
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
	}
	
	.qrCode .qrImage{
		height: 100%;
		width: 100%;
		position: relative;
	}
	
	.qrCode .qrImage image{
		height: 300rpx;
		width: 300rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
</style>